<template>
  <div>
    <nav-top class="pos t0 zi10"
             Licon="back"
             title="搜索"
             @callback="goBack" />
    <div class="serial-search">
      <div class="serialContent">
        <div class="input flex jcb">
          <input type="text"
                 class="input-inner bsb"
                 :class="{focus: value}"
                 @blur="input = value"
                 v-model="value" />
          <div class="sousuo">
            <img src="../../../assets/images/icon/icon_sousuo.png" />
          </div>
          <span class="cancel"
                @click="input = ''">取消</span>
        </div>
        <div class="tabs">
          <div class="tab vam dib transition"
               :class="{ active: val === tab }"
               v-for="(item, val) in tabs"
               :key="val"
               @click="tabChange(val)">
            {{ item }}
          </div>
        </div>
        <div class="res"
             v-if="!tab && active[0]"
             @click="goSerialDetail(active[0].serial)">
          <div class="item flex"
               v-for="(item, i) in serialLabel"
               :key="i">
            <div class="label"><span class="label-inner taj dib vam">{{ item.label }}</span>:</div>
            <div class="value wspl">{{ active[0] | formatSerialText(item.value) }}</div>
          </div>
        </div>
        <div class="res-box ova"
             v-else-if="tab && active[1] && active[1].length">
          <div class="res one"
               v-for="(one, i) in active[1]"
               :key="i"
               @click="goBatchDetail(one.id)">
            <div class="left flex-col jcb">
              <div class="top wsnw">{{ one.name }}</div>
              <div class="bottom wsnw">
                已支付/剩余：{{ one.count }}/{{
                one.amount - one.count
                }}
              </div>
            </div>
            <div class="right flex-col jcb">
              <div class="top wsnw num">
                收入：￥{{(one.real_pay || 0).toFixed(2)}}
              </div>
              <div class="bottom">{{ one.xname }}</div>
            </div>
          </div>
        </div>
        <div class="no-data tac"
             v-else-if="input && this.tab !== ''">
          未找到相关结果
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'SerialSearch',
  data() {
    return {
      tabs: ['搜索序列号', '搜索批次'],
      tab: '',
      history: {},
      serialLabel: [
        { label: '序列号', value: 'serial' },
        { label: '所属批次', value: 'oname' },
        { label: '会员卡', value: 'pname' },
        { label: '价格', value: 'present_price' },
        { label: '激活状态', value: 'status' },
        { label: '激活时间', value: 'activation_time' },
        { label: '支付时间', value: 'update_time' },
        { label: '激活用户', value: 'admin' },
        { label: '学校班级', value: 'school_name' }
      ],
      active: [],
      input: '',
      value: '',
      isShow: true,
      list: '', // 批次列表
      newValue: '',
      oldValue: ''
    }
  },
  filters: {
    formatSerialText(info, prop) {
      let str = info[prop]
      switch (prop) {
        case 'present_price':
          return '￥' + (str * 1 || 0).toFixed(2)
        case 'status':
          return ['', '未激活', '已支付', '已禁用', '已激活', '已回收'][str * 1]
        case 'activation_time':
        case 'school_name':
          return str || '无'
        case 'update_time':
          return str || '暂未支付'
        case 'admin':
          return (info.username || '无') + '\n' + (info.phone || '无')
      }
      return str
    }
  },
  watch: {
    input(val) {
      // 搜索图标
      this.active = ['', '']
      if (val) {
        if (this.history[val]) {
          this.active = this.history[val]
        } else {
          this.getCardOrderList()
          this.searchSerial()
        }
      } else {
        this.value = ''
        this.tab = ''
      }
    }
  },
  activated() {
    this.$route.params.init && (this.input = '')
  },
  created() {},
  computed: {
    ...mapGetters(['proxy_id'])
  },
  methods: {
    ...mapMutations(['setSerialDetail', 'setVipDetail']),
    // 返回
    goBack(val) {
      if (val === 'back') {
        this.$router.go(-1)
      }
    },
    // 跳到批次详情页
    goBatchDetail(id) {
      // console.log(id);
      this.$router.push({   
        name: 'SerialDetail',
        params: {
          id
        }
      })
      this.setSerialDetail(this.list)
    },
    // 跳到序列号详情页
    goSerialDetail(serial) {
      // console.log(serial)
      this.$router.push({
        params: {
          serial
        },
        name: 'SerialOneDetail'
      })
    },
    // 切换
    tabChange(val) {
      this.tab = val
      // if (this.input) {
      //   this[val ? 'getCardOrderList' : 'searchSerial']();
      // } else {
      //   this.tab = '';
      // }
    },
    // 搜索序列号
    searchSerial() {
      let params = {
        proxy_id: this.proxy_id,
        search: this.input,
        type: 1
      }

      this.Http.searchSerial(params)
        .then(res => {
          this.active.splice(0, 1, res.info)
          this.history[this.input] = this.active
        })
        .catch(console.log)
    },
    // 搜索批次
    getCardOrderList() {
      let params = {
        proxy_id: this.proxy_id,
        type: 1,
        search: this.value,
        limits: 10000
      }
      this.Http.getCardOrderList(params)
        .then(res => {
          this.list = res.list[0]
          this.active.splice(1, 1, res.list)
          this.history[this.input] = this.active
        })
        .catch(console.log)
    }
  }
}
</script>

<style scoped lang="less">
.nav {
  background-color: #fff;
}

.res-box {
  max-height: calc(100vh - 394px);
}

.serial-search {
  background-color: #fff;
}

.serialContent {
  padding: 30px 36px;
}

.input {
  align-items: center;
  position: relative;
}

.sousuo {
  width: 33px;
  height: 33px;
  overflow: hidden;
  position: absolute;
  top: 26px;
  left: 48px;
  img {
    width: 100%;
  }
}

.input-inner {
  padding: 30px 40px 30px 100px;
  width: 590px;
  height: 84px;
  font-size: 32px;
  line-height: 1;
  border-radius: 44px;
  background: #f0f2f5;
  &:focus,
  &.focus {
    padding-left: 40px;
    + .sousuo {
      display: none;
    }
  }
}

.cancel {
  color: #999;
}

.tabs {
  margin: 60px 0 36px;
  .tab {
    padding: 0 5px 4px;
    font-size: 32px;
    color: #a7aaab;
    font-weight: 500;
    background-position: bottom left;
    &:not(:last-child) {
      margin-right: 44px;
    }
    &.active {
      color: #222;
      font-weight: 900;
      background: linear-gradient(-90deg, rgb(103, 219, 255), rgb(54, 172, 255))
        no-repeat bottom left / 100% 16px;
    }
  }
}

.res {
  padding: 36px 36px 40px;
  background: #f0f2f5;
  box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  color: #999;
  line-height: 2;
  font-weight: 500;
}

.label {
  margin-right: 50px;
  .label-inner {
    width: 130px;
  }
}

.value {
  color: #222;
}

.res.one {
  display: flex;
  justify-content: space-between;
  padding: 34px 30px;
  &:not(:last-child) {
    margin-bottom: 36px;
    border-bottom: 1px solid #e8e8e8;
  }
  > :nth-child(n) {
    height: 82px;
    line-height: 1;
  }
  .top {
    color: #222;
    font-size: 36px;
    .inner {
      color: #999;
      font-size: 24px;
    }
  }
  .right {
    width: 250px;
  }
}

.no-data {
  margin-top: 170px;
  font-weight: 500;
  font-size: 36px;
  color: #666;
}
</style>
